<script setup lang="ts">
const props = defineProps({
  windowHeight: {
    type: Number,
    defalut: 947,
  },
  defalutHeight: {
    type: Number,
  },
});
const zoomRatio = computed(() => {
  const wH = props.windowHeight || 947;
  const dH = props.defalutHeight || 947;
  return wH / dH;
});
</script>

<template>
  <div class="swiper-pages">
    <div class="page-bg">
      <div class="content" :style="'transform: scale(' + zoomRatio + ');'">
        <div class="problem">
          <h2 class="title">我们可以为您解决哪些问题</h2>
          <p class="desc">
            甬易支付致力于为您解决核心支付问题，开启无忧支付之旅，让每一笔交易都更加便捷、安全、高效
          </p>
          <div class="problem-list">
            <div class="problem-item">
              <img src="/images/index/problem1.png" alt="" />
              <div class="item">
                <p class="item-title">安全保障升级</p>
                <p class="item-desc">
                  采用先进的加密技术和多层防护体系，确保您的每一笔交易都安全无虞，让您支付无忧。
                </p>
              </div>
            </div>
            <div class="problem-item">
              <img src="/images/index/problem2.png" alt="" />
              <div class="item">
                <p class="item-title">支付难题一站式解决</p>
                <p class="item-desc">
                  甬易支付为您提供多样化的支付解决方案，满足您的不同需求。
                </p>
              </div>
            </div>
            <div class="problem-item">
              <img src="/images/index/problem3.png" alt="" />
              <div class="item">
                <p class="item-title">高效便捷体验</p>
                <p class="item-desc">
                  简化支付流程，支持快速支付通道，让交易秒级完成，提升用户体验，助力业务加速。
                </p>
              </div>
            </div>
            <div class="problem-item">
              <img src="/images/index/problem4.png" alt="" />
              <div class="item">
                <p class="item-title">定制化服务方案</p>
                <p class="item-desc">
                  针对不同行业特性，我们提供个性化的支付服务方案，帮助企业优化支付流程，降低成本，提升效率。
                </p>
              </div>
            </div>
          </div>
          <div class="problem-btn">
            <NuxtLink to="/register">快速上手接入</NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/mixins.scss";

.swiper-pages {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: url("/images/index/banner2.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  .page-bg {
    margin: 0 auto;
    max-width: 1920px;
  }

  .problem {
    width: 513px;
    .title {
      font-weight: 700;
      font-size: 32px;
      color: #070a14;
      position: relative;
      border-bottom: 1px solid #e12010;
      padding-bottom: 24px;
      &::after {
        content: "";
        display: block;
        width: 86px;
        height: 6px;
        background: #e12010;
        position: absolute;
        left: 0;
        bottom: -6px;
      }
    }
    .desc {
      margin-top: 24px;
      font-weight: 350;
      line-height: 24px;
      font-size: 16px;
      color: #7a7b7f;
      @include ellipsis(2);
    }
  }
  .problem-list {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    .problem-item {
      display: flex;
      margin-bottom: 52px;
      &:nth-child(2n) {
        margin-left: auto;
      }

      img {
        width: 52px;
        height: 52px;
      }
      .item {
        margin-left: 16px;
        width: 160px;
        .item-title {
          font-weight: 700;
          font-size: 16px;
          color: #070a14;
        }
        .item-desc {
          margin-top: 10px;
          line-height: 20px;
          font-weight: 400;
          font-size: 13px;
          color: #7a7b7f;
        }
      }
    }
  }
  .problem-btn {
    font-weight: 500;
    font-size: 20px;
    color: #242424;
    width: 300px;
    height: 76px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 4px solid #242424;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
    a {
      font-weight: 500;
      font-size: 18px;
      color: #242424;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
      &::after {
        transform: translateX(10px);
      }
    }
    &::after {
      content: "";
      display: block;
      transition: transform 0.3s ease-in-out;
      position: absolute;
      right: -40px;
      width: 79px;
      height: 15px;
      background-image: url("/images/layouts/more-btn-arrow2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
  }
}
</style>
